<template>
	<view>
		<u-navbar
			title="申请退款"
			@rightClick="rightClick"
			:autoBack="true"
			placeholder
			:titleStyle="titleStyle">
		</u-navbar>

		<view class="Wrapper auto m-top50">
			<text class="black size30">退款申请</text>
			<view class="Box">
				<view class="liust color_33 size30">{{ name }}</view>
				<view class="liust">
					<text class="color_33 size30">退款金额</text>
					<text class="color_FF6 size32 bold">{{ price }}</text>
				</view>
			</view>
		</view>

		<view class="Wrapper auto m-top60">
			<text class="black size30">退款原因</text>
			<view class="Box">
				<view class="liust" v-for="(item, index) in refundData" :key="index">
					<text class="color_33 size30">{{ item.name }}</text>
					<view
						class="select"
						@click="current = item.current"
						:class="{ Active: current == item.current }">
						<view class="iconfont icon-xuanzhong size30"></view>
					</view>
				</view>
			</view>
			<text class="color_99 size30 m-top30">注：原路退回（1-3个工作日退款到原支付账户）</text>
		</view>

		<view class="fotter" @click="refuseOrder">申请退款</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleStyle: {
					fontWeight: 'bold',
				},
				name: '',
				price: '',
				refundData: [
					{
						name: '计划有变',
						current: 1,
					},
					{
						name: '其他原因',
						current: 2,
					},
				],
				current: 0,
				order_id: '',
			};
		},
		onLoad(opt) {
			if (opt.name) this.name = opt.name;
			if (opt.price) this.price = opt.price;
			if (opt.order_id) this.order_id = opt.order_id;
		},
		methods: {
			refuseOrder() {
				if (this.current == 0) return this.$Toast('请选择退款原因');
				this.$showLoading('');
				this.$http
					.post({
						url: '/SiteApi/refuseOrder',
						data: {
							id: this.order_id,
						},
					})
					.then((res) => {
						this.$hideLoading();
						if (res.code != 200) return this.$Toast(res.msg);
						this.$Toast(res.msg, 2);
					});
			},
		},
	};
</script>
<style lang="scss">
	page {
		background-color: $pages;
	}
</style>
<style lang="scss" scoped>
	.Wrapper {
		width: 700rpx;

		display: flex;
		flex-direction: column;
		.Box {
			width: 100%;
			background-color: #fffcf7;
			border-radius: 10rpx;
			margin: 80rpx auto 0;
			padding: 20rpx 30rpx;
			.liust {
				width: 100%;
				height: 100rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #ebebeb;
				.select {
					width: 50rpx;
					height: 50rpx;
					border: 1px solid #ddd;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					.icon-xuanzhong {
						color: #fffcf7;
					}
				}
				.Active {
					background-color: #09bb07;
					border: 1px solid #09bb07;
					.icon-xuanzhong {
						color: #fff;
					}
				}
			}
		}
	}

	.fotter {
		width: 700rpx;
		height: 80rpx;
		background-color: $color_d85;
		position: fixed;
		bottom: 30rpx;
		left: 25rpx;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 34rpx;
	}
</style>
